<template>
    <div class="supplierRecent">
        <!-- 动态列表 -->
        <el-card class="list">
            <div slot="header">
                <span class="title">企业动态</span>
                <!-- <el-button class="bt" type="text"><i class="el-icon-right"></i></el-button> -->
            </div>
            <el-card class="one-recent" v-for="item,id in recentList" :key="id">
                <div class="content">
                    <span class="text">{{item.verbal_content}}</span>
                    <div class="images">
                        <img v-lazy="item2.photo_url" v-for="item2,i in item.photo_url_list" :key="i">
                    </div>
                </div>
                <div>
                    <span class="tips">{{item.post_time}}</span>
                </div>
            </el-card>
        </el-card>
                <!-- <div class="loading"
                    v-loading="true"
                    v-if="loading && !reachBottom"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading">
                </div>
                <div class="reachBottom" v-if="reachBottom">
                    到底了~~~
                </div> -->
    </div>
</template>

<script>
export default {
    name:'supplierRecent',
    data () {
      return {
        // count : 0,
        // loading : false,
        // recentArray : this.recentArr,
        // reachBottom : false,

        recentList:[],
      }
    },
    methods:{
        //监听滚轮是否到底
        // watchScroll : function() {
        //     if(this.$refs.recentFrame.scrollTop + this.$refs.recentFrame.clientHeight >= this.$refs.recentFrame.scrollHeight){
        //         this.loading = true
        //     }
        // },
        //拿到加载的数据，隐藏loading,或者没有数据了显示到底了
        // getRecentData : function(data) {
        //     if(data){
        //         this.recentArray = this.recentArray.concat(data)
        //         this.loading = false
        //     } else {
        //         this.reachBottom = true
        //     }
        // },
        async load() {
            this.recentList = []
            await this.$API.getSupplierRecent().then(res => {
                if (res.status == 200) {
                res.data.reverse()
                let supplier_id = this.$store.state.supplier.supplier_id
                for (let obj of res.data) { // 找到这个商家的动态
                    if (obj.supplier_id == supplier_id) this.recentList.push(obj)
                }
                return this.$API.getSupplierRecentPhotos()
                }
            }).then(res => {
                if (res.status == 200) {
                for (let obj of this.recentList) { // 找到动态对应的图片
                    let photo_url_list = []
                    for (let obj1 of res.data) {
                    if (obj.id == obj1.supplier_recent_id) {
                        photo_url_list.push(obj1)
                    }
                    }
                    obj['photo_url_list'] = photo_url_list
                }
                this.$forceUpdate()
                }
            })
        }
    },
    created() {
        this.load()
    },
    mounted(){
        //监听滚轮是否到底
        // this.$refs.recentFrame.addEventListener('scroll', this.watchScroll)
    }
}
</script>

<style lang="less" scoped>
.title{
    color: @color-theme;
    font-size: 2rem;
}
.bt{
    float: right; 
    padding: 0;
    margin-left: 20px;
    font-size: 2rem;
}
.tips{
    color: @color-tips;
}
.list{
    padding: 20px 45px;
    .one-recent{
        margin-bottom: 20px;
        .text{
            line-height: 1.5rem;
        }
        .images{
            margin-top: 10px;
            img{
                height: 100px;
            }
        }
    }
}
</style>